<!DOCTYPE html>
<html lang="en">

<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="utf-8">
    
        
                <meta name="keywords" content="爱前端 | 爱工作 | 爱生活">
                
                    
                            <meta name="description" content="This is My blog">
                            
                                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
                                <title>
                                    
                                                一只正在成长的程序猿
                                </title>
                                
                                    <link rel="shortcut icon" href="/images/headPortrait.png">
                                    
                                        <link rel="stylesheet" href="/css/style.css">
                                            
                                                <link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">
                                                    
                                                        <script src="/js/pace.min.js"></script>
</head></html>

    <body>
        <main class="content">
            <section class="jumbotron">
  <div class="video">
    
      <div class="video-frame">
        <img src="/images/ocean/overlay-hero.png" alt="Decorative image frame">
      </div>
    
    <div class="video-media">
      <video playsinline="" autoplay="" loop="" muted="" data-autoplay=""
             poster="/images/ocean/ocean.png" x5-video-player-type="h5">
        <source src="/images/ocean/ocean.mp4" type="video/mp4">
        <source src="/images/ocean/ocean.ogv" type="video/ogg">
        <source src="/images/ocean/ocean.webm" type="video/webm">
        <p>Your user agent does not support the HTML5 Video element.</p>
      </video>
      <div class="video-overlay"></div>
    </div>
    <div class="video-inner text-center text-white">
      <h1><a href="/">一只正在成长的程序猿</a></h1>
      <p>爱前端 | 爱工作 | 爱生活</p>
      <div><img src="/images/shark-inverted.svg" class="brand" alt="一只正在成长的程序猿"></div>
    </div>
    <div class="video-learn-more">
      <a class="anchor" href="#landingpage"><i class="fe fe-mouse"></i></a>
    </div>
  </div>
</section>

<div id="landingpage">
  <section class="outer">
  <article class="articles">
    
    <h1 class="page-type-title"></h1>

    
      
        <article id="post-vue中v-touch事件用法" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue中v-touch事件用法/">vue中v-touch事件用法</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue中v-touch事件用法/" class="article-date">
  <time datetime="2019-08-07T09:31:46.733Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <h4 id="1-先下载"><a href="#1-先下载" class="headerlink" title="1.先下载"></a>1.先下载</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install vue-touch@next --save dev</span><br></pre></td></tr></table></figure>
        
          <a class="article-more-link" href="/2019/08/07/vue中v-touch事件用法/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue中v-touch事件用法/" data-id="cjzdy95us0014acu8cyhz77zp"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue中v-touch事件用法/">vue中v-touch事件用法</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vue中scss的用法" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue中scss的用法/">vue中scss的用法</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue中scss的用法/" class="article-date">
  <time datetime="2019-08-07T09:31:46.714Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <h4 id="1-在src文件夹里面新建assets文件夹"><a href="#1-在src文件夹里面新建assets文件夹" class="headerlink" title="1.在src文件夹里面新建assets文件夹"></a>1.在<code>src</code>文件夹里面新建<code>assets</code>文件夹</h4><h4 id="2-在asstes文件夹里面新建css文件夹"><a href="#2-在asstes文件夹里面新建css文件夹" class="headerlink" title="2.在asstes文件夹里面新建css文件夹"></a>2.在<code>asstes</code>文件夹里面新建<code>css</code>文件夹</h4>
        
          <a class="article-more-link" href="/2019/08/07/vue中scss的用法/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue中scss的用法/" data-id="cjzdy95uq0011acu8wnq3hqpq"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue中scss的用法/">vue中scss的用法</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vue中animate.css用法" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue中animate.css用法/">vue中`animate.css`用法</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue中animate.css用法/" class="article-date">
  <time datetime="2019-08-07T09:31:46.699Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <h4 id="1-先下载"><a href="#1-先下载" class="headerlink" title="1.先下载"></a>1.先下载</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install animate.css --save</span><br></pre></td></tr></table></figure>
        
          <a class="article-more-link" href="/2019/08/07/vue中animate.css用法/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue中animate.css用法/" data-id="cjzdy95up000yacu8qvulp03p"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue中-animate-css-用法/">vue中`animate.css`用法</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vue图片上传及压缩组件的封装" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue图片上传及压缩组件的封装/">vue图片上传及压缩组件的封装</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue图片上传及压缩组件的封装/" class="article-date">
  <time datetime="2019-08-07T09:31:46.680Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <p><a href="./uploadPictures/uploadPictures.vue">源码地址</a></p>
<h4 id="使用方法："><a href="#使用方法：" class="headerlink" title="使用方法："></a>使用方法：</h4><blockquote>
<p>先去上面的链接把组件，复制到自己的<code>components</code>文件夹内</p>
</blockquote>
        
          <a class="article-more-link" href="/2019/08/07/vue图片上传及压缩组件的封装/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue图片上传及压缩组件的封装/" data-id="cjzdy95v0001hacu8uyqzki8r"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue图片上传及压缩组件的封装/">vue图片上传及压缩组件的封装</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vue图片上传和上传之前的压缩" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue图片上传和上传之前的压缩/">vue上传图片与压缩</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue图片上传和上传之前的压缩/" class="article-date">
  <time datetime="2019-08-07T09:31:46.664Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <blockquote>
<p>这其中我一共用了两种做法，推荐<code>第一种</code>，因为第二种在有的苹果手机兼容性不是很好，有时会出现网页奔溃现象</p>
</blockquote>
<h2 id="一、compressorjs-方式"><a href="#一、compressorjs-方式" class="headerlink" title="一、compressorjs 方式"></a>一、compressorjs 方式</h2>
        
          <a class="article-more-link" href="/2019/08/07/vue图片上传和上传之前的压缩/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue图片上传和上传之前的压缩/" data-id="cjzdy95v1001kacu80muss8s9"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue上传图片与压缩/">vue上传图片与压缩</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vue图片上传" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue图片上传/">vue图片上传</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue图片上传/" class="article-date">
  <time datetime="2019-08-07T09:31:46.647Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <h4 id="html"><a href="#html" class="headerlink" title="html"></a>html</h4>
        
          <a class="article-more-link" href="/2019/08/07/vue图片上传/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue图片上传/" data-id="cjzdy95uy001dacu8bzbazp6b"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue图片上传/">vue图片上传</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vue判断手机移动端" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue判断手机移动端/">vue判断手机移动端</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue判断手机移动端/" class="article-date">
  <time datetime="2019-08-07T09:31:46.646Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//App.vue，判断是否为移动端</span></span><br><span class="line">_isMobile() &#123;</span><br><span class="line">    <span class="keyword">let</span> flag = navigator.userAgent.match(<span class="regexp">/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i</span>)</span><br><span class="line">	 <span class="keyword">return</span> flag;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
        
          <a class="article-more-link" href="/2019/08/07/vue判断手机移动端/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue判断手机移动端/" data-id="cjzdy95uv0018acu868z3kfsk"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue判断手机移动端/">vue判断手机移动端</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vue技术点" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue技术点/">vue技术点</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue技术点/" class="article-date">
  <time datetime="2019-08-07T09:31:46.629Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <h1 id="2019-2-15"><a href="#2019-2-15" class="headerlink" title="2019 2.15"></a>2019 2.15</h1><h2 id="一、vue中websocket用法及封装"><a href="#一、vue中websocket用法及封装" class="headerlink" title="一、vue中websocket用法及封装"></a>一、vue中websocket用法及封装</h2><h4 id="1-先下载"><a href="#1-先下载" class="headerlink" title="1.先下载"></a>1.先下载</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install vue-socket.io --save-dev</span><br></pre></td></tr></table></figure>
        
          <a class="article-more-link" href="/2019/08/07/vue技术点/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue技术点/" data-id="cjzdy95v7001racu8wxbuwytv"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue技术点/">vue技术点</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vue给js添加版本号" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue给js添加版本号/">vue给js加版本号</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue给js添加版本号/" class="article-date">
  <time datetime="2019-08-07T09:31:46.621Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <h4 id="在build文件里面的webpack-prod-conf-js文件里面加如下代码"><a href="#在build文件里面的webpack-prod-conf-js文件里面加如下代码" class="headerlink" title="在build文件里面的webpack.prod.conf.js文件里面加如下代码"></a>在<code>build</code>文件里面的<code>webpack.prod.conf.js</code>文件里面加如下代码</h4>
        
          <a class="article-more-link" href="/2019/08/07/vue给js添加版本号/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue给js添加版本号/" data-id="cjzdy95va001vacu8e2ustx10"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue给js加版本号/">vue给js加版本号</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vue动态绑定类名的几种方法" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue动态绑定类名的几种方法/">vue动态绑定类名的几种方法</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue动态绑定类名的几种方法/" class="article-date">
  <time datetime="2019-08-07T09:31:46.605Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <p>单个判断推荐<a href="#1我们可以传给v-bindclass一个对象以动态地切换-class" ">1</a>，两个条件动态切换推荐<a href="#5三元表达式动态切换class推荐">5</a>，多个推荐<a href="#4数组的方式绑定class">4</a></p>
<h4 id="“1我们可以传给v-bindclass一个对象以动态地切换-class”">1.我们可以传给 `v-bind:class` 一个对象，以动态地切换 class</h4>

<blockquote>
<p>根据<code>isActive</code>的true,false变化，动态绑定单个class</p>
</blockquote>
        
          <a class="article-more-link" href="/2019/08/07/vue动态绑定类名的几种方法/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue动态绑定类名的几种方法/" data-id="cjzdy95uw001bacu82p2303rr"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue动态绑定类名的几种方法/">vue动态绑定类名的几种方法</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
  </article>
  

  
    <nav class="page-nav">
      
      <a class="extend prev" rel="prev" href="/">上一页</a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/">3</a><a class="page-number" href="/page/4/">4</a><a class="extend next" rel="next" href="/page/3/">下一页</a>
    </nav>
  
</section>
</div>

                <footer class="footer">
  <div class="outer">
    <div class="float-right">
      <ul class="list-inline">
  
    <li><i class="fe fe-smile-alt"></i> <span id="busuanzi_value_site_uv"></span></li>
  
</ul>
    </div>
    <ul class="list-inline">
      <li>&copy; 2019 一只正在成长的程序猿</li>
      <li>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></li>
      <li>Theme  <a href="https://github.com/zhwangart/hexo-theme-ocean">Ocean</a></li>
    </ul>
  </div>
</footer>

        </main>
        <aside class="sidebar">
            <button class="navbar-toggle"></button>

<nav class="navbar">
  
    <div class="logo">
      <a href="/"><img src="/images/shark.svg" alt="一只正在成长的程序猿"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/">主页</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/archives">归档</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/about">关于</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="搜索">
        <i class="fe fe-search"></i>
        搜索
      </a>
    </li>
  </ul>
</nav>

<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      <div class="totop" id="totop">
  <i class="fe fe-rocket"></i>
</div>
    </li>
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>

<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
        </aside>
        <script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/lazyload.min.js"></script>
<script src="/js/snap.svg-min.js"></script>
<script src="/js/busuanzi-2.3.pure.min.js"></script>


  <script src="/fancybox/jquery.fancybox.min.js"></script>



  <script src="/js/search.js"></script>


<script src="/js/ocean.js"></script>

    </body>

    </html>